﻿@page "/components/treeview"

<DocsPage>
    <DocsPageHeader Title="TreeView">
        <Description>Easily customizable tree view.</Description>
    </DocsPageHeader>
    <DocsPageContent>
        <DocsPageSection>
            <SectionHeader>
                <Title>Simple Tree View</Title>
                <Description></Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" DisplayFlex="true">
                <TreeViewSimpleExample />
            </SectionContent>
            <SectionSource Code="TreeViewSimpleExample" GitHubFolderName="Tree" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <Title>Highlight TreeItem on mouse over</Title>
                <Description></Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" DisplayFlex="true">
                <TreeViewHoverExample />
            </SectionContent>
            <SectionSource Code="TreeViewHoverExample" GitHubFolderName="Tree" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <Title>Activate TreeItem on click (select and highlight a single item)</Title>
                <Description>Use <CodeInline>@@bind-Activated</CodeInline> on TreeViewItem to bind a single item.</Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" DisplayFlex="true">
                <TreeViewActivateExample />
            </SectionContent>
            <SectionSource Code="TreeViewActivateExample" GitHubFolderName="Tree" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <Title>Selectable items</Title>
                <Description>Use <CodeInline>@@bind-Selected</CodeInline> on TreeViewItem to bind a single item.</Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" DisplayFlex="true">
                <TreeViewSelectExample />
            </SectionContent>
            <SectionSource Code="TreeViewSelectExample" GitHubFolderName="Tree" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <Title>Expand-on-click</Title>
                <Description></Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" DisplayFlex="true">
                <TreeViewExpandOnClickExample />
            </SectionContent>
            <SectionSource Code="TreeViewExpandOnClickExample" GitHubFolderName="Tree" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <Title>TreeItem with icons</Title>
                <Description></Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" DisplayFlex="true">
                <TreeViewIconExample />
            </SectionContent>
            <SectionSource Code="TreeViewIconExample" GitHubFolderName="Tree" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <Title>Dense TreeView</Title>
                <Description></Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" DisplayFlex="true">
                <TreeViewDenseExample />
            </SectionContent>
            <SectionSource Code="TreeViewDenseExample" GitHubFolderName="Tree" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <Title>TreeViewItemTemplate Example</Title>
                <Description>This example shows how to use ItemTemplate to automatically build the tree items according to a hierarchical data structure.</Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" DisplayFlex="true">
                <TreeViewItemTemplateExample />
            </SectionContent>
            <SectionSource Code="TreeViewItemTemplateExample" GitHubFolderName="Tree" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <Title>Custom Tree</Title>
                <Description>
                    When Content property is used, it will completely replace the default rendering of the MudTreeViewItem to use your own.
                    Use <CodeInline>Height</CodeInline> or <CodeInline>MaxHeight</CodeInline> parameter to scroll the treeview.
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" DisplayFlex="true">
                <TreeViewCustomExample />
            </SectionContent>
            <SectionSource Code="TreeViewCustomExample" GitHubFolderName="Tree" />
        </DocsPageSection>
    </DocsPageContent>
</DocsPage>
